<template>
  <div class="detail">
    <BackNav />
    <img :src="detail.coverImg" alt="" width="100%" height="200px" />
    <h3>{{ detail.name }}</h3>
    <p>￥{{ detail.price }}</p>
    <van-button
      type="info"
      size="large"
      class="addCart_Btn"
      @click="addcart"
      color="linear-gradient(to right, #ff6034, #ee0a24)"
      >加入购物车</van-button
    >
  </div>
</template>

<script>
import { reqProductsDetail } from "../../api/products";
import BackNav from "@/components/backNav";
import { addtocart } from "../../api/cart";
import { Toast } from "vant";
export default {
  data() {
    return {
      detail: {},
    };
  },
  methods: {
    async loadDetail(id) {
      const result = await reqProductsDetail(id);
      console.log(result);
      this.detail = result;
    },
    async addcart() {
      this.productID = this.$route.params.id;
      const result = await addtocart({
        product: this.productID,
        quantity: this.quantity,
      });
      // console.log(res);
      if (result.code == "success") {
        Toast("添加购物车成功");
        this.$router.push("/cart");
      } else {
        Toast("添加购物车失败");
      }
    },
  },
  created() {
    const id = this.$route.params.id;
    this.loadDetail(id);
  },
  components: { BackNav },
};
</script>

<style scoped>
.detail h3 {
  font-size: 13px;
  color: #888;
}
.detail p {
  font-size: 10px;
  color: rgb(234, 74, 5);
}
</style>
